<template>
     
     <el-form-item  :label="jmname"> 
        <!-- 普通输入框 字符串--> 
        <el-input v-if="type === 'text'"   type="text" v-model="modelValue" @input="onInput" :placeholder="placeholder" :disabled="disabled" />
        <!-- 数字输入框 数字-->
        <el-input v-else-if="type === 'num'" 
                  type="number" v-model="modelValue" @input="onInput" :placeholder="placeholder" :disabled="disabled" />
        <!-- 密码输入框  密码-->
        <el-input v-else-if="type === 'password'" 
                  type="password" v-model="modelValue" @input="onInput" :placeholder="placeholder" :disabled="disabled" />
        <!-- 多行输入框 文本-->
        <el-input v-else-if="type === 'textarea'" 
                  type="textarea" v-model="modelValue" @input="onInput"
                  :autosize="{minRows: 3, maxRows: 10}" :placeholder="placeholder" :disabled="disabled"></el-input>
        <!-- 日期 日期-->
        <el-date-picker v-else-if="type === 'date'" 
                        type="date" v-model="modelValue" @change="onInput"
                        value-format="YYYY-MM-DD" :placeholder="placeholder" :disabled="disabled"></el-date-picker>
        <!-- 日期时间 日期+时间-->
        <el-date-picker v-else-if="type === 'datetime'" 
                        type="datetime" v-model="modelValue" @change="onInput"
                        value-format="YYYY-MM-DD HH:mm:ss" :placeholder="placeholder" :disabled="disabled"></el-date-picker>
        <!-- 时间 时间-->
        <el-time-picker v-else-if="type === 'time'"
                        type="datetime" v-model="modelValue" @change="onInput"
                        value-format="HH:mm:ss" :placeholder="placeholder" :disabled="disabled"></el-time-picker>
        <!-- 滑块参数 -->
        <el-slider v-else-if="type === 'slider'" 
                   v-model="modelValue" @input="onInput" :disabled="disabled"></el-slider>
        <!-- 颜色输入 -->
        <div v-else-if="type === 'color'"
             style="line-height: 0;">
            <el-color-picker v-model="modelValue" @change="onInput" :disabled="disabled"></el-color-picker>
        </div>
        <!-- 评分组件 -->
        <div v-else-if="type === 'rate'"
             style="line-height: 0;">
            <el-rate v-model="modelValue" @change="onInput" show-text :disabled="disabled"></el-rate>
        </div>
        <!-- 图片上传 -->

        <div v-else-if="type === 'img'"
             style="line-height: 0;">
 
                    <el-upload
                        class="avatar-uploader"
                        action="http://real-think.jmwl51.com//admin/Ajaxs/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="modelValue" :src="modelValue" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
         
        </div>
        <!-- 多图上传 -->

        <div v-else-if="type === 'imgs'"  style="line-height: 0;">
                     <el-upload
                      action="http://real-think.jmwl51.com//admin/Ajaxs/upload"
                      :multiple = true
                      list-type="picture-card"
                      :with-credentials='true'
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-error="handleError"
                      :on-success="handleAvatarSuccesss"
                      :file-list="modelValue"
                      :before-upload="beforeAvatarUpload">
                      <i class="el-icon-plus"></i>
                        </el-upload>
                   
                        <el-dialog v-model="dialogVisible">
                        <img  w-full :src="dialogImageUrl" alt="Preview Image"  style="width:100%"/>
                      </el-dialog>
        </div>

        
        <!-- 文件上传 -->

        <!-- <div v-else-if="type === 'file'" style="line-height: 0;">
                   
        </div> -->
        <!-- 多文件上传 -->

        <div v-else-if="type === 'files'"   style="line-height: 0;">
                   
        </div>
        <!-- 备注信息 -->
        <span class="c-remark" v-if="remark">{{remark}}</span>
    </el-form-item>
</template>

<script>
 
export default {
  name: "JmInput",
   data() {
    return {
      dialogImageUrl:"",
      dialogVisible:false,
      pictures:[]
    }},

   props:{
		type: {
          default: 'text'  
        },
        // 标题 
        jmname: {},
        // 绑定值 
        modelValue: {},
        // 提示文字 
        placeholder: {},
        // 备注文字
        remark: {}, 
        // 是否禁用 
        disabled: {},
	},
    emits:['update:modelValue'],
     methods:{ 
        onInput($event) {
            // console.log($event);
            // this.$parent.modelValue=$event;
            //  $emit('update:modelValue', $event);
            // proxy.$emit('update:modelValue', $event);
            this.$emit('update:modelValue', $event);
            // this.$emit('modelValue', $event);
        },
        // 图片上传   
        handleAvatarSuccess(res){ 
             this.$emit('update:modelValue', res.data.allfile)
        },
    
        handleRemove(uploadFile, uploadFiles)  {
        console.log(uploadFile, uploadFiles)
      },
 
          handleRemove(file, fileList) {//移除
          // this.tabsList.splice(index,1)
				// console.log(file, fileList);
         if(typeof(this.modelValue) == "undefined"||this.modelValue==''||this.modelValue==null){
          this.pictures=fileList;
        }
          this.$emit('update:modelValue', 	fileList)
			},
			handlePictureCardPreview(file) {//预览
			 
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
		 
		 
			handleAvatarSuccesss(res, file) {//图片上传成功
				var files =    { url: res.data.allfile };
        if(typeof(this.pictures) == "undefined"||this.pictures==''||this.pictures==null){
          this.pictures=this.modelValue;
        }
				this.pictures.push( files)				
				this.dialogImageUrl = res.data.allfile;
          this.$emit('update:modelValue', 	this.pictures)
			  }
 
    },
};	
 

 
</script>

<style> 
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
 
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             0000000000